<template>
   <div class="container">
      <Yheader></Yheader>
       <section class="scroll-list"  v-infinite-scroll="loadMore"
                 infinite-scroll-disabled="busy"
                infinite-scroll-distance="20">
          <swiper auto height="340px" dots-position="center">
            <swiper-item class="black swiper-demo-img" v-for="(bannerlistItem,index) in bannerlist" :key="index">
              <img class=" fadeInUp animated imgbox" :src="bannerlistItem.src" alt="">
            </swiper-item>
          </swiper>
          <div class="tablist">
             <div class="tabbox">
               <router-link :to='{path:"/GoodsList",}'>
                  <img src="../assets/yingtao.png" >
                  <p class="tabtext">
                     拼团好物
                  </p>
               </router-link>
             </div>
             <div class="tabbox" v-for="(tab,index) in tablist" :key="index">
               <router-link :to='{path:"/GoodsList",query:{id:tab.id}}'>
                  <img :src="tab.img" :alt="tab.description">
                  <p class="tabtext">
                      {{tab.name}}
                  </p>
               </router-link>
             </div>
          </div>
          <div class="box">
              <div class="title-pin">
                每日拼团 
                <div class="pin-t-box">剩余 &nbsp;
                    <span class="text-pin">{{hourNum}}</span>: 
                    <span class="text-pin">{{minuteNum}}</span>: 
                    <span class="text-pin">{{secondNum}}</span>.
                    <span class="text-pin">{{millisecond}}</span>
                </div>
                </div>
              <div class="list-shop">
                 <div class="list-item">
                  
                    <div class="box1-item" v-for="(hotListItem,index) in hotList" :key="index">
                      <span class="pro-text">双人拼</span>
                      <router-link :to='{path:"/ShopDetail",query:{userId:$route.query.userId,shopId:hotListItem.id}}'>
                        <img class="fadeInUp animated pion-img" :src="hotListItem.logo" alt="">
                        <div class="pin-box">
                          <div class="name-pin">{{hotListItem.name}}</div>
                          <div class="price-box">
                            <span class="dis-box">¥{{hotListItem.promotionPrice}}</span>
                             <span class="pr-box">¥{{hotListItem.price}}</span>
                             <span class="btn">拼团</span>
                          </div>
                        </div>
                      </router-link>
                    </div>
                </div>
              </div>
          </div>
          <div class="box">
            <div class="title">超值~好物</div>
              <div class="box-up">
                <router-link  :to='{path:"/ShopDetail",query:{userId:$route.query.userId,shopId:upList.id}}'>
                  <div class="div up-img">
                    <img :src="upList.logo" alt="">
                  </div>
                  <div class="box-te">
                    <p class="title">{{upList.name}}</p>
                    <div class="price-box">
                      <span class="dis-box">¥{{upList.promotionPrice}}</span>
                      <span class="pr-box">¥{{upList.price}}</span>
                    </div>
                    <p class="btn-t">
                      超级特惠
                    </p>
                  </div>
                </router-link>
              </div>
             <div class="upbox" >
                <div class="up" v-for="(upItem,indexs) in upTwolist" :key="indexs">
                  <router-link :to='{path:"/ShopDetail",query:{userId:$route.query.userId,shopId:upItem.id}}'>
                    <div class="upImg">
                      <img :src="upItem.logo" alt="">
                      <div class="texet">
                        {{upItem.name}}
                      </div>
                    </div>
                  </router-link>
                </div> 
             </div>
          </div>
          <div class="shop-list box">
             <div class="title-flex">
               <div class="title">
                   热销新品
               </div>
             </div>
              
                <div class="list-shop">
                 <div class="list clearfix">
                     <div class="shopbox" v-for="(allListItem,index) in allList" :key="index">
                         <router-link :to='{path:"/ShopDetail",query:{userId:$route.query.userId,shopId:allListItem.id}}'>
                           <div class="imgbox">
                             <img :src="allListItem.logo" alt="" class="shopimg">
                           </div>
                           <p class="shop-des">
                             {{allListItem.name}}
                           </p>
                           <div class="price">
                             <span>¥{{allListItem.discountPrice}}</span>
                             <span class="old">￥{{allListItem.price}}</span>
                             <span class="bt" v-if="allListItem.promotion==1">团购</span>
                            
                            </div>
                         </router-link>
                     </div>
                      <load-more :tip="loadingText" :show-loading="loading"></load-more>
                 </div>
              </div>
          </div>
      
       </section>
        <foot-nav/>
   </div>
</template>
<script>
import Yheader from "./common/header"
import footNav from "@/components/common/footer.vue"
import { SwiperItem,Swiper,Scroller,LoadMore} from 'vux'
import { mapState, mapGetters, mapActions } from "vuex";
export default {
    components:{
      Yheader,
      SwiperItem,
      Swiper,
      footNav,
      Scroller,
      LoadMore
    },
    data  ()  {
      return {
        bannerlist:[],
        hotList:[],
        allList:[],
        upTwolist:[],
        busy:false,
        pageNumber:0,
        tablist:[],
        upList:[],
        loadingText:"正在加载",
        loading:true,
        listQuery: {
            pageNumber: 1,
            pageSize: 10,
            param: {
               pid: ''
            },
        },
        hourNum: "00",
        minuteNum: '00',
        secondNum: '00',
        millisecond: 0,
        timer: null
      }
    },
    mounted(){
      console.log(222)
      this.getUplist()
      this.getBannerList()
      this.getHotList()
      this.getTabList()
      let title = "【发现好货】  晨烨超级购";
      let desc = "好货等你来";
      let link = window.location.href;
      console.log(111)
      this.wxShare(title,desc,link)
    },
    created(){
      this.showTime()
    },
    destroyed() {
      clearInterval(this.timer)
    },
    methods:{
        showTime() {
          let self = this;
          this.timer = setInterval(self.leftTime,10);
        },
        leftTime(){
          let startTime = new Date()
          let endTime = new Date()
          endTime.setHours(23)
          endTime.setMinutes(59)
          endTime.setSeconds(59)
          var num = parseInt((endTime.getTime()-startTime.getTime())/1000);
          if(num>0){
            var leftHours = parseInt(num/3600);
            var leftMinutes = parseInt((num-leftHours*3600)/60);
            var leftSeconds = parseInt(num-leftHours*3600-leftMinutes*60);
            if(leftHours<10) {
              leftHours = "0" + leftHours
            }
            if(leftMinutes<10) {
              leftMinutes = "0" + leftMinutes
            }
            if(leftSeconds<10) {
              leftSeconds = "0" + leftSeconds
            }
            this.millisecond++
            if(this.millisecond==100){
              this.millisecond = 0
            }
            if(this.millisecond<10) {
              this.millisecond = "0" + this.millisecond
            }
          }else{
            leftHours = "00"
            leftMinutes = "00"
            leftSeconds = "00"
          }
          this.hourNum = leftHours
          this.minuteNum = leftMinutes
          this.secondNum = leftSeconds
        },
        getUplist(){
          var self=this
          var datas={
            pageNumber: 1,
            pageSize:10,
            param:{
              faddish:'1'
              }
          }
          this.$axios.post('/device/product/list',datas).then((res) => {
            console.log(res)
             self.upList=res.data.data.list[0]
            self.upTwolist=res.data.data.list.slice(1)
          })
       },
       getTabList(){
          var self=this
          this.$axios.post('/device/kind/list',this.listQuery).then((res) => {
               for(let i=0;i<7;i++){
                 self.tablist=self.tablist.concat(res.data.data.list[i])
               }
          })
       },
        getBannerList(){   //banner图
          var self=this
          this.$axios.post('/device/banner/list',{}).then((res) => {
            console.log(res)
             self.bannerlist=res.data.data
          })
        },
        getHotList(){   //热销
          var self=this
          var datas={
            pageNumber: 1,
            pageSize:10,
            param:{
              recommend:1
              }
          }
          this.$axios.post('/device/product/list',datas).then((res) => {
        
            self.hotList=res.data.data.list
          })
        },
        loadMore() {
          this.busy =true;
          this.pageNumber++;
          this.getAllLIst();
        },
        getAllLIst(){   //全部商品
          var self=this
          var datas={
            pageNumber: this.pageNumber,
            pageSize:10,
            param:{
              faddish:""
              }
          }
          this.$axios.post('/device/product/list',datas).then((res) => {
            self.allList=self.allList.concat(res.data.data.list)

        
             if(res.data.data.list.length<10){
                     self.busy = true
                     self.loadingText="没有数据啦·～～·"    
                      self.loading=false  
                }else{  
                     self.busy = false
                }
          })
        },
     }
}
</script>
<style scoped lang="less">
.box-te{
  flex:1;
  text-align: right;
  line-height: 1;
  .btn-t{
        font-size: 40px;
    font-weight: 800;
     padding-top: 19px; 
  }
  .title{
     text-align: right;
    border: 0;
    font-size: 38px;
    padding-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
}
  .price-box{
    padding-top: 0 8px;
    text-align: right;
  }
}
.price-box{
      text-align: left;
    padding-bottom: 6px;
  .btn{
           background: #ff1c4b;
    color: #fff;
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-weight: 800;
    font-size: 28px;
    text-align: center;
}
  .dis-box{
    color: #ff464e;
    font-size: 30px;
    font-weight: 600;
    margin-right:4px;
    padding-left:6px;
  }
  .pr-box{
        font-size: 24px;
    line-height: 28px;
    text-decoration: line-through;
    font-weight: 400;
    color: #999999;
  }
}
.pro-text{
    padding: 0 20px;
    position: absolute;
    top: 172px;
    left: 0;
    z-index: 2;
    font-size: 20px;
    background-color: #ff1c4b;;;
    border-radius: 0 20px 20px 0;
    color: #fff;
}
.pin-box{
  padding: 10px 0 0 0;
}
.name-pin{
    text-align: left;
    font-size: 22px;
    padding:0 8px;
    overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.list-item{
  display: -webkit-box;
   background-color: #f3f3f3;
  overflow-y: hidden;
}
.bt{
      background: #ff4444;
    color: #fff;
    height: 34px;
    font-size: 26px;
    line-height: 32px;
    padding: 4px;
    border-radius: 8px;
}
.tabbox {
 flex: 0 0 25%;
 
}
 .old{
    text-decoration: line-through;
    color: #7d7d7d;
    flex:1;
    padding-left: 4px;
    font-size: 22px;
    line-height: 66px;
    text-align: left;
}
.texet{
    background: rgba(173, 175, 177, 0.63);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 40px;
    width:100%;
    line-height: 40px;
    font-size: 28px;
    color: #222222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.show-icon{
  width:62px;
  height: 40px;
  background: url(../assets/show-icon.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  top:14px;
  right: -20px;
}
.up{
  border-top: 1px solid #e5e6e9;
  border-right: 1px solid #e5e6e9;
  border-bottom: 1px solid #e5e6e9;
  padding:20px;
  height:244px ;
  box-sizing: border-box;
  width: 374px;
  position: relative;
  flex:1;
}
.box-up{
   height:244px ;
   display: flex;
   padding:20px;
   a{
     display: flex;
     flex:1;
     color: #141617;
   }
   .up-img{
     display: flex;
     height:244px ;
      align-items: center;
      img{
       width:334px;
      height: 230px;
      }
   }
  
}
.up:nth-child(2){
  border-right: none;
}
.upbox{
  display: flex;
}
.up img{
  width:100%;
  min-height: 80%;
  
}
.uptext{
  position: absolute;
  top:14px;
  right: 14px;
  width: 82px;
  height: 32px;
  
  text-align: center;
  border: 1px solid #a7a6d9;
  font-size: 24px;
  line-height: 32px;
  color: #a7a6d9;
}
.uptextNew{
  position: absolute;
  top:14px;
  right: 14px;
  width: 82px;
  height: 32px;
  text-align: center;
  border: 1px solid #ff4444;
  font-size: 24px;
  line-height: 32px;
  color: #ff4444;
}
.up .upImg{
  height: 203px;
  width: 334px;
  overflow: hidden;
  position: relative;
}
.tabbox  a{
   display: flex;
 flex-flow: column;
 align-items: center;
 justify-content: center;
 display: block;
}
.tabbox img{
  width:50px;
  padding-top:26px;
  height: 40px;
}
.tabtext{
  font-size: 24px;
  color: #666666;
}
.pion-img{
      height: 200px;
    width: 190px;
}
.tablist{
  padding:0 38px 26px 38px;
  display: flex;
  background: #fff;
  flex-wrap:wrap;
}
.price{
  font-size: 34px;
  font-weight: 700;
  color: #ff1c4b;;
  text-align: left;
  line-height: 66px;
  align-items: center;
  display: flex;
  padding:0 10px;
}
.shop-list{
  background: #fff;
}
.shop-des{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  padding:0 10px;
}
.shopbox{
   flex: 0 0 49%;
   background: #fff;
       margin-bottom: 15px;
    text-align: left;
}
.shopbox a{
  display: block;
}
.shopbox p{
  padding-top:6px;
      color: #444444;
    width: 330px;
    height: 50px;
    line-height: 50px;
    font-size: 32px;
}
.imgbox{
  width: 330px;
  height: 294px;
  overflow: hidden;
}
.imgbox img{
  width: 100%;
  min-height: 100%;
}
.list-shop{
       background: #f2f3f6;
   overflow: hidden;
   padding:0 10px;
}
.list{
  display: flex;
  flex-flow: row wrap;
  /* align-content: flex-start; */
  justify-content: space-between;
      background: #f2f3f6;
}
.box{
  background: #fff;
}
.imgbox{
  width: 100%;
  min-height: 100%;
}
.container{
    position: relative; 
    height: 100%;
    box-sizing: border-box;
}
section{
         overflow:auto;
         -webkit-overflow-scrolling: touch; 
    background: #f2f3f6;
    padding-top: 104px;
    padding-bottom: 100px;
    height: 100%;
}
.box{
    margin-top:13px;
    background: #fff;
}
.title{
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #f1f1f1;
    font-size: 32px;
    font-weight: 600;
    color: #4a4a4a;
    padding-left: 18px;
    text-align: left;
}
.title-pin{
   height: 80px;
    line-height: 80px;
    border-bottom: 1px solid  #c5c5c5;
    font-size: 34px;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: #4a4a4a;
    padding-left: 18px;
    position: relative;
    .pin-t-box{
      position: absolute;
      height: 80px;
      right:10px;
      bottom:0;
          font-size: 24px;
    }
}
.text-pin{
    background: #000;
    color: #fff;
    font-size: 24px;
    line-height: 31px;
    padding: 0 9px;
    margin: 0 7px;
    border-radius: 10px;
}
   .animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
  min-height: 100%;
}
.swiper-demo-img{
  overflow: hidden;
}
.box1-item {
  width: 190px;
  text-align: center;
  position: relative;
  margin-left: 10px;
 font-size: 26px;
   color: black;
       background: #fff;
  a{
    display: block;
    background: #fff;
    color: black;
  }
}
.box1-item:first-child {
  margin-left: 0;
}
</style>

